<template>
  <div class="gap-table-out-container" :style="{...setTbodyHeight()}">
    <h5 class="gap-table-thead flex-row">
      <section class="gap-table-th gap-table-cell" v-for="col in columns" :key="col.key" :style="setCellStyle(col)">{{col.title}}</section>
    </h5>
    <ul class="gap-table-tbody">
      <li class="gap-table-tr flex-row" v-for="(rows, idx) in datas" :key="idx">
        <section class="gap-table-td gap-table-cell" v-for="col in columns" :key="`${col.key}_${idx}`" :style="setCellStyle(col)">
          <template v-if="col.isSlot">
            <slot :name="col.key" :row="rows"></slot>
          </template>
          <template v-else>
            <div class="cell" :title="rows[col.key]">{{rows[col.key]}}</div>
          </template>
        </section>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'GapTable',
  props: {
    height: {
      type: String,
      default: 'auto'
    },
    // 表头数据
    columns: {
      // 参数 key, title, width等
      type: Array,
      default: () => []
    },
    // 标题数据
    datas: {
      type: Array,
      default: () => []
    }
  },
  data(){
    return {

    }
  },
  methods: {
    setCellStyle(col) {
      return {
        [col.width? 'width': 'flex']: col.width? col.width: 1,
        justifyContent: col.align? col.align: 'center'
      }
    },
    setTbodyHeight(){
      if(this.height){
        return {
          height: this.height,
          'overflow': 'hidden auto'
        }
      }else {
        return {
          height: 'auto'
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .gap-table-out-container {
    // height: 100%;

    width: 100%;
    .gap-table-tbody .gap-table-tr,
    .gap-table-thead {
      width: 100%;
      height: 80px;
      background: rgba(0, 161, 215, .1);
      box-shadow: inset 0 0 20px 0 rgba(37, 193, 255, 0.4);
      border: 1px solid rgba(37, 193, 255, .3);
      box-sizing: border-box;
    }
    .gap-table-tbody .gap-table-tr {
      margin-top: 6px;
    }
    .gap-table-cell {
      display: flex;
      align-items: center;
      padding: 12px;
      height: 100%;
      line-height: 1.5;
      color: #fff;
      box-sizing: border-box;
      border-right: 1px dashed rgba(233, 255, 208, .5);
      &:last-child {
        border-right: 0;
      }
      &.gap-table-th {
        font-size: 16px;
        font-weight: 600;
        overflow: hidden;
      }
      &.gap-table-td {
        font-size: 12px;
        overflow: hidden;
      }
      .cell {
        display: flex;
        align-content: center;
        align-items: center;
        height: 56px;
        //white-space: w;
        overflow: hidden;
        text-overflow: ellipsis;
        //display: -webkit-box;
        //-webkit-box-orient: vertical;
        //-webkit-line-clamp: 3;

      }
    }
  }
</style>
